<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <link rel="stylesheet" href="https://www.layuicdn.com/layui/css/layui.css">
    <script src="https://www.layuicdn.com/layui-v2.5.6/layui.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<div class="layui-col-xs10 layui-col-xs-offset1" style="margin-top: 20px;">
    <div class="layui-form">
        <div class="layui-col-xs12" style="height: 510px;overflow: auto;">
            <table class="layui-table">
                <colgroup>
                    <col width="100">
                    <col width="200">
                    <col width="100">
                    <col width="150">
                    <col width="350">
                    <col>
                </colgroup>
                <thead>
                <tr>
                    <th>课程码</th>
                    <th>课程名称</th>
                    <th>课程状态</th>
                    <th>课程限制</th>
                    <th>课程简介</th>
                    <th>操作</th>
                </tr>
                </thead>
                <tbody>
                <tr th:each="course : ${courses}">
                    <td th:text="${course.id}"></td>
                    <td><a th:href="@{'info/' + ${course.id}}" th:text="${course.name}"></a></td>
                    <td th:switch="${course.status}">
                        <span th:case="0">未考试</span>
                        <span th:case="1">考试中</span>
                        <span th:case="2">考试结束</span>
                    </td>
                    <td>
                        <span th:if="${course.allow}">允许加入</span>
                        <span th:if="not ${course.allow}">禁止加入</span>
                        <button th:onclick="edit([[${course.id}]])" type="button"
                                class="layui-btn layui-btn-sm layui-btn-primary">
                            <i class="layui-icon">&#xe669;</i>
                        </button>
                    </td>
                    <td th:text="${course.description}"></td>
                    <td>
                        <button th:onclick="test([[${course.id}]], true)" th:if="${course.status == 0}" type="button"
                                class="layui-btn layui-btn-warm layui-btn-sm">开始考试
                        </button>
                        <button th:onclick="test([[${course.id}]], false)" th:if="${course.status == 1}" type="button"
                                class="layui-btn layui-btn-sm">考试结束
                        </button>
                    </td>
                </tr>
                </tbody>
            </table>
        </div>
        <!-- 分页 -->
        <div class="layui-col-xs4 layui-col-xs-offset4">
            <button th:onclick="changePageUp([[${page}]])" type="button"
                    class="layui-btn"
                    th:classappend="${page > 1} ? '' : 'layui-btn-disabled'">上一页
            </button>
            <span th:text="${page}"></span>
            <button th:onclick="changePageDown([[${page}]],[[${count}]])" type="button"
                    class="layui-btn"
                    th:classappend="${page < count} ? '' : 'layui-btn-disabled'">下一页
            </button>
        </div>
    </div>
</div>
</body>
<div id="papers" style="display: none;">
    <div style="margin-top: 20px;margin-left: 20px;">
        {{# layui.each(d.list, function(index, item){ }}
        <div style="margin-top: 10px;"><input type="radio" id="{{ item.id }}" name="paperId" value="{{item.id}}"> <label
                for="{{ item.id }}">{{ item.name }}</label><br></div>
        {{# }); }}
        {{# if(d.list.length === 0){ }}
        暂无试卷，请在试卷管理中创建
        {{# } }}
    </div>
</div>
<script type="text/javascript">
    //上一页
    function changePageUp(page) {
        if (page > 1) {
            page -= 1;
            window.location.href = 'course?page=' + page + '&limit=9';
        } else {
            alert("当前页已经是第一页");
        }
    }

    //下一页
    function changePageDown(page, count) {
        if (page < count) {
            page += 1;
            window.location.href = 'course?page=' + page + '&limit=9';
        } else {
            alert("当前页已经是最后一页");
        }
    }

    function edit(id) {
        $.post('course/allow', {
            id: id
        }, function (res) {
            if (res.code == '00000') {
                location.reload();
            } else {
                alert(res.message);
            }
        })
    }

    function test(id, status) {
        var data = {
            id: "id='paperId'"
        };
        if (status) {
            //开始考试
            layui.use(['layer', 'laytpl', 'form'], function () {
                var layer = layui.layer;
                var laytpl = layui.laytpl;
                var form = layui.form;
                $.getJSON('paper/all', {
                    id: id
                }, function (res) {
                    if (res.code == '00000') {
                        data.list = res.data;
                        var papers = $("#papers").html();
                        laytpl(papers).render(data, function (html) {
                            layer.open({
                                type: 1,
                                title: '选择试卷',
                                shadeClose: true,
                                shade: false,
                                btn: ['选择'],
                                yes: function (index) {
                                    var load = layer.load(1);
                                    layer.close(index);
                                    var paperId = $("input[name='paperId']:checked").val();
                                    $.post('course/start', {
                                        courseId: id,
                                        paperId: paperId
                                    }, function (res) {
                                        layer.close(load)
                                        if (res.code == '00000') {
                                            layer.alert('开始考试', function () {
                                                location.reload();
                                            })
                                        } else {
                                            layer.alert(res.message);
                                        }
                                    }, 'json')
                                },
                                maxmin: true,
                                area: ['500px', '350px'],
                                content: html
                            });
                        });
                    } else {
                        layer.alert(res.message);
                    }
                })
            })
        } else {
            //考试结束
            layui.use('layer', function () {
                var layer = layui.layer;
                var load = layer.load(1);
                $.post('course/stop', {
                    courseId: id
                }, function (res) {
                    layer.close(load);
                    layer.alert(res.message, function () {
                        location.reload();
                    });
                }, 'json')
            })
        }
    }
</script>
</html>